<template>

    <div class="viewcontent">
        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
            <el-form-item label="下单时间" prop="pay_time">
                <el-date-picker v-model="form.pay_time" type="daterange" align="right" size="mini" unlink-panels
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="mini">搜索</el-button>
                <el-button @click="resetForm('form')" size="mini">重置</el-button>
                <el-button size="mini" @click="init()">刷新</el-button>
            </el-form-item>
        </el-form>
        <div class="content2">
            <el-table align="center" :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                stripe default-expand-all v-loading="loading">
                <el-table-column align="center" header-align="center" prop="date" width="150"
                    label="日期"></el-table-column>
                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="100" label="场次">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <span style="font-size: 8pt;">{{ scope.row.venue1.name }}</span>
                            <span style="font-size: 8pt;">{{ scope.row.venue2.name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="100" label="领课加V单数">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.lingke_jiav_order.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.lingke_jiav_order.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.lingke_jiav_order.user)" style="font-size: 8pt;">{{
                                scope.row.venue2.lingke_jiav_order.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="100" label="领课加V数">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.lingke_jiav.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.lingke_jiav.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.lingke_jiav.user)" style="font-size: 8pt;">{{
                                scope.row.venue2.lingke_jiav.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="100" label="已邀约数">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.yiyaoyue.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.yiyaoyue.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.yiyaoyue.user)" style="font-size: 8pt;">{{
                                scope.row.venue2.yiyaoyue.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="100" label="未邀约数">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.weiyaoyue.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.weiyaoyue.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.weiyaoyue.user)" style="font-size: 8pt;">{{
                                scope.row.venue2.weiyaoyue.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="100" label="邀约已到课">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.yaoyue_yidaoke.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.yaoyue_yidaoke.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.yaoyue_yidaoke.user)" style="font-size: 8pt;">{{
                                scope.row.venue2.yaoyue_yidaoke.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="120" label="邀约1次未到课">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.yaoyue_weidaoke1.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.yaoyue_weidaoke1.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.yaoyue_weidaoke1.user)" style="font-size: 8pt;">{{
                                scope.row.venue2.yaoyue_weidaoke1.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="120" label="邀约2次未到课">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.yaoyue_weidaoke2.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.yaoyue_weidaoke2.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.yaoyue_weidaoke2.user)" style="font-size: 8pt;">{{
                                scope.row.venue2.yaoyue_weidaoke2.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="120" label="邀约3次未到课">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.yaoyue_weidaoke3.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.yaoyue_weidaoke3.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.yaoyue_weidaoke3.user)" style="font-size: 8pt;">{{
                                scope.row.venue2.yaoyue_weidaoke3.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="120" label="邀约4次未到课">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.yaoyue_weidaoke4.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.yaoyue_weidaoke4.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.yaoyue_weidaoke4.user)" style="font-size: 8pt;">{{
                                scope.row.venue2.yaoyue_weidaoke4.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="120" label="邀约5次未到课">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.yaoyue_weidaoke5.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.yaoyue_weidaoke5.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.yaoyue_weidaoke5.user)" style="font-size: 8pt;">{{
                                scope.row.venue2.yaoyue_weidaoke5.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="120" label="邀约6次未到课">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.yaoyue_weidaoke6.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.yaoyue_weidaoke6.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.yaoyue_weidaoke6.user)" style="font-size: 8pt;">{{
                                scope.row.venue2.yaoyue_weidaoke6.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="120" label="邀约7次未到课">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.yaoyue_weidaoke7.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.yaoyue_weidaoke7.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.yaoyue_weidaoke7.user)" style="font-size: 8pt;">{{
                                scope.row.venue2.yaoyue_weidaoke7.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="120" label="邀约8次未到课">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.yaoyue_weidaoke8.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.yaoyue_weidaoke8.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.yaoyue_weidaoke8.user)" style="font-size: 8pt;">{{
                                scope.row.venue2.yaoyue_weidaoke8.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="120" label="邀约9次未到课">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.yaoyue_weidaoke9.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.yaoyue_weidaoke9.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.yaoyue_weidaoke9.user)" style="font-size: 8pt;">{{
                                scope.row.venue2.yaoyue_weidaoke9.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="center" header-align="center" prop="wx_avatarurl" width="120" label="邀约10次未到课">
                    <template slot-scope="scope">
                        <div class="content_view">
                            <el-link type="primary" @click="chakan(scope.row.venue1.yaoyue_weidaoke10.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.yaoyue_weidaoke10.num }}</el-link>
                            <el-link type="primary" @click="chakan(scope.row.venue2.yaoyue_weidaoke10.user)" style="font-size: 8pt;">{{
                                scope.row.venue1.yaoyue_weidaoke10.num }}</el-link>
                        </div>
                    </template>
                </el-table-column>


            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="form.pageSize"
                    background layout="total, sizes, prev, pager, next, jumper" :total="form.total"></el-pagination>
            </div>
        </div>

        <!--选择标签-->
        <el-dialog v-dialogDrag :visible.sync="useropen" width="60%" height="600px" append-to-body title="查看明细">
            <!--查看人员-->
            <div class="renyuan_content">

                <div class="biaoqian_content2">
                    <!--已选标签-->
                    <div class="biaoqian_right_content2">
                        <!-- <div class="biaoqian_right_content_item">
                            <div class="biaoqian_right_content_item_contnet" style="justify-content: left;">
                                <div class="biaoqian_left_content_content_item_content_title"
                                    v-for="(item2, index2) in senddata_zhujiao" :key="index2">
                                    {{ index2 }}:{{ item2 }}
                                </div>
                            </div>
                        </div> -->
                        <div style="overflow-y: scroll; max-height: 300px;">
                            <el-table :data="senddata" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                                stripe default-expand-all>
                                <el-table-column prop="wx_unionid" label="客户" width="250">
                                    <template slot-scope="scope">
                                        <span style="display: flex;height: 30px;line-height: 30px;width: auto;">
                                            <img :src="scope.row.wx_avatar" width="30px" height="30px"
                                                style="margin-right: 5px;border-radius: 100%;">
                                            {{ scope.row.wx_name }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="sender" label="邀约人" width="250" align="center"
                                    header-align="center">
                                    <template slot-scope="scope">
                                        <el-tag type="success">{{ scope.row.zhujiaoname }}</el-tag>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>

                    </div>

                </div>
            </div>
        </el-dialog>


    </div>
</template>

<script>

let _that;
import { getStatusList } from '@/api/live/invitation';
import PersButton from '@/components/PersButton.vue';
export default {
    components: {
        PersButton
    },
    data() {
        return {
            loading: false,
            tableData: [],
            senddata:[],
            useropen:false,
            form: {
                pageSize: 10,
                pageNumber: 1,
                total: 0,
                pay_time: []
            },
        }
    },
    created() {
        _that = this;
        this.init();
    },
    methods: {
        init() {
            _that.loading = true;

            getStatusList(_that.form).then((res) => {
                console.log(res);
                _that.tableData = res.data.list;
                _that.form.total = res.data.total;
                _that.loading = false;
            })

        },
        search: function () {
            _that.loading = true;
            _that.form.pageSize = 10;
            _that.form.pageNumber = 1;
            _that.init();
        },
        handleSizeChange: function (e) {
            console.log(e);
            _that.form.pageSize = e;
            _that.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            _that.form.pageNumber = e;
            _that.init();
        },
        resetForm(formName) {
            _that.$refs[formName].resetFields();
            this.form.liveId = []
            this.form.state = ''
            this.form.user_name = ''
            this.form.signin_status = ''
            _that.init();
        },
        chakan(user) {
            _that.useropen = true;
            _that.senddata = user;
        }

    }

}
</script>


<style>
.viewcontent {
    display: flex;
    flex-direction: column;
}

.content2 {
    display: flex;
    flex-direction: column;
}

.content_view {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.renyuan_content {
    display: flex;
    width: 100%;
}

.biaoqian_content2 {
    display: flex;
    width: 100%;
}

.biaoqian_right_content2 {
    margin: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(180, 180, 180);
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: scroll;
    /* 启用垂直滚动 */
    max-height: 500px;
    overflow: auto;
    /* 隐藏滚动条 */
    padding: 20px;
}

.biaoqian_right_content_item {
    display: flex;
    flex-direction: column
}

.biaoqian_right_content_item_contnet {
    display: flex;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 10px;
}

.biaoqian_left_content_content_item_content_title {
    border-color: #dfdfdf;
    border-width: 1px;
    border-style: solid;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
}
</style>